<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">在习生/毕业生</div>
          <el-input 
            v-model="classSearchInput" 
            placeholder="请输入姓名或手机号" 
            style="width: 150px" 
            class="className"
          />
          <el-input 
            v-model="classSearchInput1" 
            placeholder="请输入学校名称" 
            style="width: 150px" 
            class="className"
          />
          <div style="position: relative">
            <el-button @click="handleSearch" class="search">搜索</el-button>
            <img src="../../assets/images/搜索.png" class="searchImg" alt="" />
          </div>
        </div>
        <div class="header-right">
          <img src="../../assets/images/back.png" class="addmsg1" @click="getback" />
          <img src="../../assets/images/加号.png" class="addmsg" @click="handleAdd" />
        </div>
      </div>
    </div>

    <div class="class-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="studentName" label="姓名" align="center" :min-width="80" />
        <el-table-column prop="sex" label="性别" align="center" :min-width="60" />
        <el-table-column prop="className" label="班级" align="center" :min-width="230" />
        <el-table-column prop="graduationDate" label="毕业日期" align="center" :min-width="110" />
        <el-table-column prop="tel" label="电话" align="center" :min-width="120" />
        <el-table-column label="销售顾问" align="center" :min-width="80">
          <template #default="scope">{{ scope.row.saleName || '管理员' }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" :min-width="80">
          <template #default="scope">
            <div :style="{ color: scope.row.status == '2' ? 'green' : 'red' }">
              {{ scope.row.status == '2' ? '已毕业' : '未毕业' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" :min-width="160">
          <template #default="scoped">
            <el-button link type="success" @click="() => handleEdit(scoped.row)">修改</el-button>
            <el-button link type="danger" @click="del(scoped.row)" class="details1">删除</el-button>
            <el-button link type="primary" @click="() => handleDetails(scoped.row)" class="details1">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
        <div> 
          每页
          <el-input-number 
            v-model="pageSize" 
            :min="1" 
            :max="30" 
            controls-position="right" 
            @change="handleSizeChange"
          />条
        </div>
      </div>
    </div>

    <!-- 添加在习生模态框 -->
    <el-dialog v-model="dialogVisible" title="添加在习生" width="400px" :show-close="false">
      <el-form 
        :model="formData" 
        :rules="rules" 
        ref="formRef" 
        label-width="120px" 
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="formData.studentName" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="班级" prop="className">
            <el-select 
              v-model="formData.className" 
              placeholder="请选择班级" 
              @change="() => {
                if (!Array.isArray(classList) || classList.length === 0) {
                  ElMessage.error('班级列表未加载，请稍后再试');
                  return;
                }
                const classItem = classList.find(item => item.className === formData.className);
                classItem ? getClassMsg(classItem.classId) : ElMessage.error('请选择有效班级');
              }"
            >
              <!-- 修正：遍历classList.value（ref数组的实际值） -->
              <el-option 
                v-for="item in classList" 
                :key="item.classId" 
                :label="item.className" 
                :value="item.className"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="毕业日期" prop="graduationDate">
            <el-date-picker
              v-model="formData.graduationDate"
              type="date"
              placeholder="请选择毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData.tel" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入家庭地址" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="紧急联系人" prop="emContact">
            <el-input v-model="formData.emContact" placeholder="请输入紧急联系人" />
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emTel">
            <el-input v-model="formData.emTel" placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="账号" prop="account">
            <el-input v-model="formData.account" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="学校和专业" prop="major">
            <el-input v-model="formData.major" placeholder="请输入学校和专业" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData.remarks"
              :autosize="{ minRows: 2, maxRows: 4 }"
              resize="none"
              style="width: 500px"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" class="confirm">确认</el-button>
      </template>
    </el-dialog>

    <!-- 修改在习生模态框 -->
    <el-dialog v-model="dialogVisible2" title="修改预招生" width="400px" :show-close="false" style="margin-top:30px">
      <el-form 
        :model="formData2" 
        :rules="rules2" 
        ref="formRef2" 
        label-width="120px" 
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="formData2.studentName" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="班级" prop="className">
            <el-select 
              v-model="formData2.className" 
              @change="() => {
                if (!Array.isArray(classList) || classList.length === 0) {
                  ElMessage.error('班级列表未加载，请稍后再试');
                  return;
                }
                const classItem = classList.find(item => item.className === formData2.className);
                classItem ? getClassMsg1(classItem.classId) : ElMessage.error('请选择有效班级');
              }"
            >
              <!-- 修正：遍历classList -->
              <el-option 
                v-for="item in classList" 
                :key="item.classId" 
                :label="item.className" 
                :value="item.className"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData2.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="毕业日期" prop="graduationDate">
            <el-date-picker
              v-model="formData2.graduationDate"
              type="date"
              placeholder="请选择预毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData2.tel" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="formData2.address" placeholder="请输入家庭地址" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="紧急联系人" prop="emContact">
            <el-input v-model="formData2.emContact" placeholder="请输入紧急联系人" />
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emTel">
            <el-input v-model="formData2.emTel" placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="账号" prop="account">
            <el-input v-model="formData2.account" disabled />
          </el-form-item>
          <el-form-item label="学校和专业" prop="major">
            <el-input v-model="formData2.major" placeholder="请输入学校和专业" />
          </el-form-item>
        </el-row>
        <!-- <el-row v-if="formData2.remarks">
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData2.remarks"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
              disabled
            />
          </el-form-item>
        </el-row> -->
        <el-row>
          <el-form-item :label="formData2.remarks ? '新增备注' : '备注'" prop="remarks1">
            <el-input
              type="textarea"
              v-model="formData2.remarks1"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible2 = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleEdit1" class="confirm">修改</el-button>
      </template>
    </el-dialog>

    <!-- 在习生详情抽屉 -->
    <el-drawer 
      v-model="dialogVisible3" 
      title="在习生详情" 
      size="700" 
      :show-close="false" 
      style="background-color: #f0f8ff"
    >
      <el-row>
        <el-col :span="12">姓名：{{ formData3.studentName }}</el-col>
        <el-col :span="12">班级：{{ formData3.className }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">性别：{{ formData3.sex }}</el-col>
        <el-col :span="12">毕业日期：{{ formData3.graduationDate }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">电话：{{ formData3.tel }}</el-col>
        <el-col :span="12">学校和专业：{{ formData3.major }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">紧急联系人：{{ formData3.emContact }}</el-col>
        <el-col :span="12">紧急联系人电话：{{ formData3.emTel }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">账号：{{ formData3.account }}</el-col>
        <el-col :span="12">销售顾问：{{ formData3.saleName || '管理员' }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">家庭地址：{{ formData3.address }}</el-col>
      </el-row>
      <el-row style="display: flex">
        <el-col :span="2">备注：</el-col>
        <el-col :span="22" class="content2">{{ formData3.remarks }}</el-col>
      </el-row>
      <template #footer>
        <el-button @click="dialogVisible3 = false" class="cancel">关闭</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getGraduate,
  modifyGraduate,
  getClass,
  addGraduate,
  deleteGraduate,
  getStudentById,
  getClassById,
} from '@/components/api/Graduate'

// 1. 响应式数据定义（优化：处理user为null的情况）
const total = ref(0)               // 总条数（优先用接口返回的total）
const pageSize = ref(7)            // 每页显示条数
const currentPage = ref(1)         // 当前页码
const tableData = ref([])          // 表格数据
const classSearchInput = ref('')   // 姓名/手机号搜索
const classSearchInput1 = ref('')  // 学校名称搜索
const classList = ref([])          // 班级列表（ref对象，值为数组）
const user = ref(JSON.parse(localStorage.getItem('user')) || {}) 

// 模态框状态
const dialogVisible = ref(false)   // 添加模态框
const dialogVisible2 = ref(false)  // 修改模态框
const dialogVisible3 = ref(false)  // 详情抽屉

// 表单数据
const formData = ref({            // 添加表单
  studentName: '', className: '', sex: '', graduationDate: '', tel: '',
  emContact: '', emTel: '', account: '', address: '', classId: '',
  major: '', remarks: ''
})
const formData2 = ref({           // 修改表单
  studentId: '', studentName: '', className: '', sex: '', graduationDate: '',
  tel: '', emContact: '', emTel: '', account: '', address: '', classId: '',
  major: '', remarks: '', remarks1: ''
})
const formData3 = ref({})          // 详情数据
const oldformData2 = ref({})      // 修改前原始数据

// 表单引用与验证规则
const formRef = ref(null)         // 添加表单引用
const rules = ref({              // 添加验证规则
  studentName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  className: [{ required: true, message: '请选择班级', trigger: 'blur' }],
  graduationDate: [{ required: true, message: '请选择毕业日期', trigger: 'change' }],
  tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  major: [{ required: true, message: '请输入学校和专业', trigger: 'blur' }],
  emTel: [{ 
    validator: (rule, value, callback) => {
      if (value && !/^1[3-9]\d{9}$/.test(value)) callback(new Error('请输入正确的手机号码'))
      else callback()
    }, trigger: 'blur' 
  }]
})
const formRef2 = ref(null)        // 修改表单引用
const rules2 = ref({              // 修改验证规则
  studentName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  className: [{ required: true, message: '请选择班级', trigger: 'blur' }],
  graduationDate: [{ required: true, message: '请选择毕业日期', trigger: 'change' }],
  tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  major: [{ required: true, message: '请输入学校和专业', trigger: 'blur' }],
  emTel: [{ 
    validator: (rule, value, callback) => {
      if (value && !/^1[3-9]\d{9}$/.test(value)) callback(new Error('请输入正确的手机号码'))
      else callback()
    }, trigger: 'blur' 
  }]
})

// 2. 接口请求与初始化
/** 获取学生列表（优化：总条数优先用接口total） */
async function getStudent(pageIndex, pageSize, search) {
  const data = { pageIndex, pageSize, search }
  if (classSearchInput1.value) data.major = classSearchInput1.value
  const isPhone = /^\d+$/.test(search.trim())
  if (isPhone) { data.tel = search; data.search = '' }
  // 优化：角色为5时传userId（兼容user为null）
    console.log(user.value.userId);
  if (user.value?.roleId == '5'){
    data.userId = user.value.userId
  
    
  } 
  console.log(data);
  
  try {
    const res = await getGraduate('studentList2', data)
    if (res?.code === 200) {
      // 优先使用接口返回的total，否则用pageCount*pageSize
      total.value = res.dataset.total || res.dataset.pageCount * pageSize;
      tableData.value = res.dataset.studentList
    } else {
      ElMessage.error(res?.message || '获取学生列表失败')
    }
  } catch (err) {
    console.error('获取学生列表错误:', err)
    ElMessage.error('获取学生列表失败，请重试')
  }
}

/** 获取班级列表（确保返回数组） */
function getClassList() {
  getClass('classList2', {})
    .then(res => {
      classList.value = Array.isArray(res?.dataset) ? res.dataset : [];
    })
    .catch(err => {
      console.error('获取班级列表失败:', err);
      classList.value = [];
      ElMessage.error('获取班级列表失败');
    });
}

/** 获取班级详情（添加用） */
async function getClassMsg(classId) {
  if (!classId) return;
  try {
    const res = await getClassById('ClassById', { classId });
    if (res?.code === 200) {
      formData.value.graduationDate = res.dataset.endTime;
    } else {
      ElMessage.error(res?.message || '获取班级信息失败');
    }
  } catch (err) {
    console.error('获取班级信息错误:', err);
    ElMessage.error('获取班级信息失败');
  }
}

/** 获取班级详情（修改用） */
async function getClassMsg1(classId) {
  if (!classId) return;
  try {
    const res = await getClassById('ClassById', { classId });
    if (res?.code === 200) {
      formData2.value.graduationDate = res.dataset.endTime;
    } else {
      ElMessage.error(res?.message || '获取班级信息失败');
    }
  } catch (err) {
    console.error('获取班级信息错误:', err);
    ElMessage.error('获取班级信息失败');
  }
}

onMounted(() => {
  if (document.querySelector('.one')) document.querySelector('.one').classList.add('oneafter')
  getStudent(currentPage.value, pageSize.value, classSearchInput.value)
  getClassList()
})

// 3. 表单操作逻辑（优化：身份权限判断）
/** 打开添加模态框（检查班级列表） */
const handleAdd = () => {
  if (!Array.isArray(classList.value) || classList.value.length === 0) {
    ElMessage.error('班级列表未加载，请稍后再试');
    return;
  }
  formRef.value?.resetFields()
  dialogVisible.value = true
}

/** 提交添加（优化：saleId权限） */
const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    const classItem = classList.value.find(item => item.className === formData.value.className)
    if (!classItem) return ElMessage.error('请选择有效班级')
    
    const data = {
      ...formData.value,
      classId: classItem.classId,
      // 优化：roleId=5时设置saleId为userId，否则留空（或按接口要求）
      saleId: user.value?.roleId == '5' ? user.value.userId : undefined
    }
    try {
      const res = await addGraduate('addStudent', data)
      if (res?.code === 200) {
        ElMessage.success('添加成功')
        dialogVisible.value = false
        getStudent(currentPage.value, pageSize.value, classSearchInput.value)
      } else {
        ElMessage.error(res?.message || '添加失败，账号或手机重复')
      }
    } catch (err) {
      console.error('添加学生错误:', err)
      ElMessage.error('添加失败，请重试')
    }
  })
}

/** 打开修改模态框（检查班级列表） */
const handleEdit = (row) => {
  if (!Array.isArray(classList.value) || classList.value.length === 0) {
    ElMessage.error('班级列表未加载，请稍后再试');
    return;
  }
  formRef2.value?.clearValidate()
  getStudentById('studentById', { studentId: row.studentId })
    .then(res => {
      if (res?.code === 200) {
        formData2.value = { ...res.dataset }
        oldformData2.value = JSON.parse(JSON.stringify(res.dataset))
        dialogVisible2.value = true
      } else {
        ElMessage.error(res?.message || '获取学生信息失败')
      }
    })
    .catch(err => {
      console.error('获取学生信息错误:', err)
      ElMessage.error('获取学生信息失败')
    })
}

/** 提交修改（优化：saleId权限） */
const handleEdit1 = () => {
  formRef2.value.validate(async (valid) => {
    if (!valid) return
    const classItem = classList.value.find(item => item.className === formData2.value.className)
    if (!classItem) return ElMessage.error('请选择有效班级')
    
    const data = {
      ...formData2.value,
      classId: classItem.classId,
      remarks: formData2.value.remarks1 
        ? `${formData2.value.remarks}\n${formData2.value.remarks1}` 
        : formData2.value.remarks,
      // 优化：roleId=5时强制设置saleId为userId，否则保留原值
      saleId: user.value?.roleId === '5' ? user.value.userId : formData2.value.saleId
    }
    if (formData2.value.tel !== oldformData2.value.tel) {
      data.tel = formData2.value.tel
      ElMessage.success(`手机号已修改，账号更新为：stu_${formData2.value.tel}，密码重置为123456`)
    }
    try {
      const res = await modifyGraduate('updateStudent', data)
      if (res?.code === 200) {
        ElMessage.success('修改成功')
        dialogVisible2.value = false
        getStudent(currentPage.value, pageSize.value, classSearchInput.value)
      } else {
        ElMessage.error(res?.message || '修改失败')
      }
    } catch (err) {
      console.error('修改学生错误:', err)
      ElMessage.error('修改失败，请重试')
    }
  })
}

/** 删除学生 */
const del = (row) => {
  ElMessageBox.confirm('确定删除该记录吗？', '提示', { type: 'warning' })
    .then(async () => {
      try {
        const res = await deleteGraduate('deleteStudent', { studentId: row.studentId })
        if (res?.code === 200) {
          ElMessage.success('删除成功')
          getStudent(currentPage.value, pageSize.value, classSearchInput.value)
        } else {
          ElMessage.error(res?.message || '删除失败')
        }
      } catch (err) {
        console.error('删除学生错误:', err)
        ElMessage.error('删除失败，请重试')
      }
    })
    .catch(() => ElMessage.info('已取消删除'))
}

/** 打开详情抽屉 */
const handleDetails = (row) => {
  getStudentById('studentById', { studentId: row.studentId })
    .then(res => {
      if (res?.code === 200) {
        formData3.value = { ...res.dataset }
        dialogVisible3.value = true
      } else {
        ElMessage.error(res?.message || '获取详情失败')
      }
    })
    .catch(err => {
      console.error('获取详情错误:', err)
      ElMessage.error('获取详情失败')
    })
}

// 4. 分页逻辑（优化：页码/条数变化处理）
/** 页码变化 */
const handleCurrentChange = (val) => {
  currentPage.value = val
  getStudent(currentPage.value, pageSize.value, classSearchInput.value)
}

/** 每页条数变化 */
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  getStudent(currentPage.value, pageSize.value, classSearchInput.value)
}

/** 搜索 */
const handleSearch = () => {
  currentPage.value = 1
  getStudent(currentPage.value, pageSize.value, classSearchInput.value)
}

/** 返回上一页 */
const getback = () => window.history.go(-1)
</script>

<style scoped>
/* 保持原样式不变 */
.addmsg1{
  width: 25px;
  height: 25px; 
  margin-right: 20px; 
  cursor: pointer; }
.class { 
  width: 90%; 
  height: 10%; 
  margin-bottom: 20px; 
  margin-top: 20px; 
}
.header-left { 
  display: flex; 
  align-items: center; 
  margin-left: 40px; 
}
.line { 
  width: 2px; 
  height: 20px; 
  background-color: #007bff; 
}
.title { 
  padding-left: 10px; 
  font-size: 20px; 
  margin-right: 20px; 
}
.className { 
  margin-right: 10px; 
}
.search { 
  background-color: #0f6ab1; 
  color: #fff; 
  border: none; 
  margin-left: 10px; 
  border-radius: 16px;  
  position: relative;
}
.header-left[data-v-c72f8661]{
  width:1000px;
}
.searchImg { 
  position: absolute; 
  top: 8px; 
  left: 10px; 
}
.header-right { 
  display: flex; 
  align-items: center; 
  margin-right: 40px; 
}
.addmsg { 
  width: 25px; 
  height: 25px; 
  cursor: pointer; 
}
.class-content { 
  width: 90%; 
  background-color: #fff; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
}
:deep(.el-table thead th) { 
  background-color: #fbfcff !important; 
}
:deep(.el-table .cell) { 
  color: black; 
}
.page { 
  margin-top: 50px; 
  margin-bottom: 20px; 
  display: flex;
  gap: 10px; 
  align-items: center; 
}
:deep(.el-pager .is-active) { 
  background-color: #0f6ab1 !important; 
}
.class-header[data-v-c72f8661]{
  background: #fff;
   width:90%;
    height:100%;
    margin:0 auto;
    background-color: #fff;
    margin-bottom: 20px;
    margin-top: 20px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    justify-content: space-between;
}
.searchImg{
  margin-left: 5px;
}
:deep(.el-button>span){
  margin-left: 10px;
}
:deep(.search[data-v-c72f8661]){
  display: flex;
  justify-content: center;
}
:deep(.el-overlay .el-overlay-dialog) { 
  position: absolute; 
}
:deep(.el-overlay) { 
  position: absolute; 
}
:deep(.el-dialog) { 
  padding: 0; 
  width: 800px; 
}
:deep(.el-dialog header span) { 
  display: inline-block; 
  width: 100%; 
  background-color: #0f6ab1; 
  height: 40px; 
  color: white; 
  font-size: 15px; 
  text-align: center; 
  line-height: 40px;
}
.class-header{
  display: flex;
  width:auto;
}
:deep(.el-select) { 
  width: 200px; 
}
:deep(.el-dialog__footer) { 
  text-align: center; 
  padding-bottom: 20px; 
}
:deep(.confirm) { 
  margin-left: 50px;
   background-color: #0f6ab1; 
  }
:deep(.cancel) { 
  background-color: #0f6ab1; 
  color: white; 
}
:deep(.el-dialog__body) { 
  display: flex; 
  justify-content: center; 
}
:deep(.el-drawer__header span) { 
  text-align: center; 
  color: black; 
  font-size: 20px; 
}
:deep(.el-drawer .el-drawer__body .el-row) { 
  margin-top: 15px !important; 
}
.content2 { 
  width: 550px; 
  height: 290px; 
  overflow-y: auto; 
  white-space: pre-line; 
  word-break: break-all; 
}
:deep(.el-drawer header) {
   background-color: #0f6ab1;
    margin-bottom: 0; 
    padding-bottom: 20px; 
  }
:deep(.el-drawer header span) { 
  color: white; 
}
:deep(.el-textarea__inner) { 
  min-height: 50px !important;
   max-height: 100px !important;
    overflow-y: auto !important; 
    }
</style>